/*******************
日常考核-统计分析
* */
<template>
  <basic-container style="overflow: auto;padding-bottom: 50px;"  >
    <el-row style="padding: 0 20px; background: #FBFBFD;" v-loading="fullscreenLoading">
      <el-row style="margin:25px 0 0 0 ;">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="开始时间:">
                <el-date-picker
                  v-model="searchForm.kssj"
                  type="month"
                  format="yyyy年M月"
                  value-format="yyyy年M月"
                  placeholder="开始时间"
                  style="width: 100%"
                  @change="changeDate"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="结束时间:">
                <el-date-picker
                  v-model="searchForm.jssj"
                  type="month"
                  format="yyyy年M月"
                  value-format="yyyy年M月"
                  placeholder="结束时间"
                  style="width: 100%"
                  @change="changeDate"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-row>
      <el-row style="border-bottom: 1px solid rgb(176, 189, 226);" >
<!--        <detailHeaderEcharts v-if="showHeader" :formData="formData" :detailDataList="detailDataList" :choosePerOrDept="choosePerOrDept"></detailHeaderEcharts>-->
<!--        <div style="width:50%; height:350px;margin-top: 10px;position: relative;">

        </div>-->
      </el-row>

      <el-row>
        <el-table
          style="width: 70%;margin-top:10px;position: absolute;"
          :data="dataList"
          border
          ref='tTable'
          highlight-current-row
          header-align="center"
          v-loading="dataListLoading"
          @row-click="handleClick"
          @current-change="selectRow"
        >
          <el-table-column type="index"  align="center" label="序号" width="60" ></el-table-column>
          <el-table-column prop="deptName" align="center" label="单位" width="120"  show-overflow-tooltip ></el-table-column>
          <el-table-column prop="jkfz" align="center" label="加、扣分值" width="110" show-overflow-tooltip></el-table-column>
          <el-table-column prop="hbqk" align="center" label="环比情况" show-overflow-tooltip>
            <el-table-column prop="hbfz" align="center" label="环比" show-overflow-tooltip></el-table-column>
            <el-table-column prop="hbcz" align="center" label="对比差额" show-overflow-tooltip></el-table-column>
            <el-table-column prop="hbfd" align="center" label="增减幅度" show-overflow-tooltip></el-table-column>
          </el-table-column>
          <el-table-column prop="tbqk" align="center" label="同比情况" show-overflow-tooltip>
            <el-table-column prop="tbfz" align="center" label="同比" show-overflow-tooltip></el-table-column>
            <el-table-column prop="tbcz" align="center" label="对比差额" show-overflow-tooltip></el-table-column>
            <el-table-column prop="tbfd" align="center" label="增减幅度" show-overflow-tooltip></el-table-column>
          </el-table-column>

        </el-table>
        <div  style="width:30%; height:400px;position: relative;float:right;margin-top: 10px;">
          <bar-chart v-if="showBarChart" :seriesData="seriesData"></bar-chart>
          <bar-chart-detail v-if="showBarDetail" :detailData="detailData"></bar-chart-detail>
        </div>
      </el-row>
    </el-row>
  </basic-container>
</template>

<script>

import { mapGetters, mapState } from "vuex";
import store from "@/store";
import barChart from "@/views/statisticsanalysis/rckhDept/barChart";
import barChartDetail from "@/views/statisticsanalysis/rckhDept/barChartDetail";
import {getAllRckhsjjgList,getAllRckhsjjgCharts} from "@/api/statisticsanalysis/allStatistics";
export default {
  data() {
    return {
      headers: {
          Authorization: "Bearer " + store.getters.access_token
      },
      choosePerOrDept: 0,
      showBarChart:true,
      showBarDetail:false,
      appealForm: {}, //申诉表单对象
      appealVis: false, //申诉弹窗
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组
      formData:{},
      multipleSelection: [], //勾选数据
      seriesData:[],
      detailData:{},
      assessParticipantId: null, //后台需要的考核id
      fullscreenLoading:false
    };
  },
  mounted() {

  },
  computed: {
      ...mapGetters(["permissions"])
  },
  components: {
    barChart,
    barChartDetail
  },
  created() {
    this.getDataList();

  },
  methods: {

    selectRow(row) {
      if (row) {
        this.$refs.tTable.setCurrentRow(row, true);
      } else {
        this.$refs.tTable.setCurrentRow();  // 取消高亮
      }
    },
    changeDate() {
      if (
        this.searchForm.kssj != null &&
        this.searchForm.kssj != "" &&
        this.searchForm.kssj != undefined ||
        this.searchForm.jssj != null &&
        this.searchForm.jssj != "" &&
        this.searchForm.jssj != undefined
      ) {
        if (this.searchForm.kssj > this.searchForm.jssj) {
          this.$message.warning('开始日期不能小于结束日期')
          this.searchForm.jssj="";
        } else {
          //sucess
        }
      }
    },
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {
       this.dataListLoading = true ;
       this.showBarDetail = false;
       this.showBarChart = true;

      getAllRckhsjjgList(this.searchForm.kssj,this.searchForm.jssj)
      .then(r => {

        if (r.data.code == 0) {
          this.dataList = r.data.data;
          this.dataListLoading = false ;
        }
        })
        .catch(err => {});

      getAllRckhsjjgCharts(this.searchForm.kssj,this.searchForm.jssj)
        .then(r => {

          if (r.data.code == 0) {
            this.seriesData = r.data.data;

          }
        })
        .catch(err => {});
    },
    //选人添加到右边的框
    handleClick(vm) {
      this.showBarDetail = true;
      this.showBarChart = false;
      this.detailData = vm

    },
  }
};
</script>

<style lang="scss" scoped>
//表格鼠标悬停的样式（背景颜色）
/deep/ {
  .el-table {
    tbody tr {
      &:hover {
        td {
          background-color: rgb(236,245,255);
        }
      }
    }
  }
}
//表格鼠标悬浮时的样式 （高亮）
/deep/ {
  .el-table--enable-row-hover {
    .el-table__body tr {
      &:hover {
        background: rgb(236,245,255);
        border: 1px solid #313463;
      }
    }
  }
}

</style>
